<template>
  <div class="add-car">
    <el-dialog
      v-el-drag-dialog="{ drag: true, full: true, resize: true }"
      title="车辆预留"
      :close-on-click-modal="false"
      :visible.sync="md.state"
      @close="closeMd"
      v-if="md.state"
      :width="'600px'"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="有车号预留" name="haveNumber"></el-tab-pane>
        <el-tab-pane label="无车号预留" name="notNumber"></el-tab-pane>
      </el-tabs>
      <el-form
        :model="fm.ps"
        :ref="fm.fname"
        :label-width="'100px'"
        class="demo-form-inline"
        @keyup.enter.native="onSubmit"
      >
        <el-row>
          <el-col>
            <el-form-item
              label="预留时间"
              prop="reserveStime"
              style=""
              :rules="[
                {
                  required: true,
                  message: '请选择预留时间',
                  trigger: 'change',
                },
              ]"
            >
              <el-date-picker
                v-model="fm.ps.reserveStime"
                type="date"
                placeholder="预留开始时间"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
              至
              <el-date-picker
                v-model="fm.ps.reserveEtime"
                type="date"
                :picker-options="pickerOptions"
                placeholder="预留结束时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row v-if="activeName == 'notNumber'">
          <el-col :span="15">
            <el-form-item label="车型大小" prop="seats">
              <el-select
                v-model="fm.ps.seats"
                clearable
                filterable
                placeholder="请选择座位数"
                style="width: 100%"
              >
                <el-option
                  v-for="(it, index) in seatsList"
                  :key="index + 'info'"
                  :label="it"
                  :value="it"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="activeName == 'notNumber'">
          <el-col :span="15">
            <el-form-item label="预留数量" prop="reserveCount">
              <el-input v-model="fm.ps.reserveCount" placeholder="预留数量" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="15">
            <el-form-item label="预留备注" prop="note">
              <el-input
                type="textarea"
                placeholder="预留备注"
                maxlength="500"
                show-word-limit
                v-model="fm.ps.note"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col>
            <el-form-item prop="find">
              <el-button
                @click="onSubmit"
                :disabled="fm.sb.load"
                type="primary"
              >
                {{ fm.sb.text }}
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import elDragDialog from "@/directive/el-drag-dialog";
import moment from "moment";
import {
  addVehicleReserve,
  getAllSeats,
} from "@/api/services/logistics.service";

import { findRepairTypeList } from "@/api/services/system.service";
export default {
  name: "addCarnumberLeave",
  directives: { elDragDialog },
  props: ["state", "repairArrId"],
  components: {},
  computed: {
    ...mapGetters(["lunitNum", "uname"]),
  },

  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          const dd = new Date();
          dd.setDate(dd.getDate() - 1);
          return time < dd;
        },
      },
      activeName: "haveNumber",
      isShowMap: false,
      md: { state: this.state },
      fm: {
        fname: "AddMaintenance",
        sb: { load: false, text: "提交预约" },
        ps: {
          note: "", // 预留备注
          plateNum: "", // 车牌号，直接获取原记录车牌号，不能修改
          reserveCount: "", // 预留数量
          reserveEtime: "", // 预留结束时间
          vehicleIds: "", // 选中的车辆的ID
          reserveStime: "", // 预留开始时间
          seats: "", // 座位数
          reserveType: null, // 预留类型 ； 有车号 和无车号
        },
        hourMinute: {
          oneTime: "",
          twoTime: "",
        },
        pd: {
          address: "",
          lng: "",
          lat: "",
        },
      },
      teamList: [],
      groupList: [],
      multipleSelection: [],
      poiList: [],
      currPoint: null,
      seatsList: [],
    };
  },
  watch: {
    activeName() {
      if (this.activeName == "notNumber") {
        this.getDgList();
      }
    },
  },
  created() {
    console.log(this.repairArrId, " thi. caiId");
  },
  methods: {
    init() {
      this.getDgList();
    },
    getDgList() {
      let loading = this.U.qloading("数据请求中...");
      getAllSeats({ minSeats: 0 })
        .then((res) => {
          console.log("res123", res);
          this.U.qclose(loading);
          const { code, seats: data } = res;
          if (code === 1) {
            this.seatsList = data;
          }
        })
        .catch(() => {
          this.U.qclose(loading);
        });
    },
    showMap() {
      this.isShowMap = true;
      console.log(1);
    },
    getAmapState(e) {
      console.log(e, "e");
      this.isShowMap = e;
    },
    getMapData(e) {
      if (!e) return;
      const { address, lng, lat } = e;
      console.log(e, "e");
      this.fm.ps.applyAddress = address;
      this.fm.ps.applyLatLon = `${lat},${lng}`;
      this.fm.pd = e;
      this.isShowMap = false;
    },

    /* 关闭弹框 */
    closeMd() {
      this.$emit("addCarLeaveMdState", false);
    },
    /**
     * 表单提交=--- 查询
     */
    onSubmit() {
      this.$refs[this.fm.fname].validate((valid) => {
        if (!valid) {
          this.U.qerror("请填写必填项");
          return false;
        } else {
          const Stime =
            moment(this.fm.ps.reserveStime).format("YYYY-MM-DD") +
            " " +
            "00:00:00";
          const Etime =
            moment(this.fm.ps.reserveEtime).format("YYYY-MM-DD") +
            " " +
            "23:59:59";

          this.fm.ps.reserveStime = Stime;
          this.fm.ps.reserveEtime = Etime;

          let pd = null;
          if (this.activeName == "haveNumber") {
            pd = {
              note: this.fm.ps.note,
              reserveEtime: this.fm.ps.reserveEtime,
              reserveStime: this.fm.ps.reserveStime,
              reserveType: 0,
              vehicleIds: this.repairArrId.map((item) => item),
            };
          } else {
            pd = {
              ...this.fm.ps,
              reserveType: 1,
              vehicleIds: this.repairArrId.map((item) => item),
            };
          }

          this.fm.sb.load = true;
          addVehicleReserve(pd)
            .then((res) => {
              if (res.code == 1) {
                this.closeMd();
                this.U.qsuccess("提交成功");
                this.fm.sb.load = false;
              } else if (res.code == 0) {
                console.log(this, "$comfirm");
                this.U.qconfim(res.msg, "有车号预留提示").then(r => {
                  if(r){
                    this.$message({
                      type: "success",
                      message: "预留成功!",
                    });
                  }else{
                    this.$message({
                      type: "info",
                      message: "已取消预留",
                    });
                  }
                });
              } else {
                this.U.qsuccess(res.msg);
                this.fm.sb.load = false;
              }
              // 调用父组件方法-重新加载数据
              that.$emit("reloadDg");
            })
            .catch((err) => {
              this.fm.sb.load = false;
            });
        }
      });
    },
  },
};
</script>